<template>
    <div>
        <el-row>
            <el-col :span="8" align="left">
                <span>商城销售姓名：</span>
                <el-input placeholder="请输入商城销售姓名" v-model="mallSaleManName" clearable style="width:50%;"></el-input>
            </el-col>
            <el-col :span="8" align="left">
                <span>商城销售手机号：</span>
                <el-input placeholder="请输入商城销售手机号" v-model="mallSaleManPhone" clearable style="width:50%;"></el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4" align="left">
                <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
            </el-col>
            <el-col :span="12"></el-col>
            <el-col :span="8" align="right">
                <el-button type="primary" icon="el-icon-plus" @click="addGift">新增销售人员</el-button>
                <el-button type="success" @click="exports" :disabled="exportLoading" :loading="exportLoading">导出数据</el-button>
            </el-col>
        </el-row> 
        <el-table
            :data="table"
            v-loading="tableLoading"
            border
            stripe 
            size="small"
            height="500"
            style="width: 100%">
            <el-table-column
                label="商城销售ID"
                prop="mallSaleManId"
                align="center"
                width="100">
            </el-table-column>
            <el-table-column
                label="商城销售姓名"
                prop="mallSaleManName"
                align="center"
                width="100">
            </el-table-column> 
            <el-table-column
                label="商城销售手机号"
                prop="mallSaleManPhone"
                align="center"
                width="120">
            </el-table-column>  
            <el-table-column
                label="创建时间"
                prop="createdTime"
                align="center"
                width="150">
            </el-table-column>  
            <el-table-column
                label="最后更新时间"
                prop="updatedTime"
                align="center"
                width="150">
            </el-table-column>    
            <el-table-column
                fixed="right"
                align="center"
                label="操作"
                width="300">
            <template slot-scope="scope">
                <el-button type="warning" size="mini" style="padding: 8px;margin: 2px" 
                @click="edit(scope.row)">修改人员信息</el-button>
                <el-button style="padding: 8px;margin: 2px" type="danger"
                        size="mini" @click="deleteItem(scope.row)">删除人员信息
                </el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="totalCount"
            style="margin:50px;">
        </el-pagination>
        <div style="margin:30px 0;" class="fw">共{{Math.ceil(totalCount/pageSize)}}页,{{totalCount}}条信息</div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogShow"
            v-loading="dialogLoading" :close-on-click-modal="false" width="800px"
        >
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12">
                    <span>销售人员姓名:</span>
                    <el-input placeholder="请输入销售人员姓名" v-model="add.mallSaleManName" clearable style="width:50%;"></el-input>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12">
                    <span>销售人员手机号:</span>
                    <el-input placeholder="请输入销售人员手机号" v-model="add.mallSaleManPhone" clearable style="width:50%;"></el-input>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12"></el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="sureAdd">确定</el-button>
                    <el-button type="danger" @click="dialogShow=false">取消</el-button>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
var searchInfo={
    mallSaleManName:"",
    mallSaleManPhone:"",
}
export default {
    data(){
        return{
            exportLoading:false,
            dialogTitle:"",
            mallSaleManName:"",
            mallSaleManPhone:"",
            tableLoading:false,
            table:[],
            currentPage: 1,
            pageSize: 20,
            totalCount: 0,
            dialogShow:false,
            dialogLoading:false,
            add:{
                mallSaleManId:"",
                mallSaleManName:"",
                mallSaleManPhone:"",
            }
        }
    },
    mounted(){
        this.initData()
    },
    methods:{
        requestInfo(){
            this.tableLoading=true;
            this.postRequest("/mall/saleman/manage", {
                mallSaleManName:this.mallSaleManName,
                mallSaleManPhone:this.mallSaleManPhone, 
                pageIndex: this.currentPage,
                pageSize: this.pageSize
            })
            .then(resp => {  
                this.tableLoading=false;
                if (resp && resp.data.status == 200){
                    this.table=resp.data.obj.rows;
                    this.totalCount = resp.data.obj.total;
                    searchInfo={
                        mallSaleManName:this.mallSaleManName,
                        mallSaleManPhone:this.mallSaleManPhone, 
                    }
                }
            });
        },
        initData(){
          this.requestInfo()
        },
        search(){
            this.currentPage = 1;
            this.requestInfo()
        },
        //列表当前页改变
        currentChange: function(currentChange) {
            this.currentPage = currentChange;
            this.requestInfo()
        },
        addGift(){
            this.dialogShow=true;
            this.dialogTitle='新增销售人员信息';
        },
        sureAdd(){
            if(this.common.isNull(this.add.mallSaleManName)){
                this.common.showToast('info','请填写销售姓名')
            }else if(this.common.isNull(this.add.mallSaleManPhone)){
                this.common.showToast('info','请填写销售手机号')
            }else{
                this.dialogLoading=true;
                if(this.dialogTitle.indexOf('新增')!=-1){
                    this.putRequest("/mall/saleman/add",{
                        mallSaleManName:this.add.mallSaleManName,
                        mallSaleManPhone:this.add.mallSaleManPhone,
                    }).then(resp=>{
                        this.dialogLoading=false;
                        if(resp && resp.data.status == 200){
                            this.dialogShow=false;
                            this.giftInfoInit();
                            this.common.showToast('success','新增成功')
                            this.requestInfo()
                        }
                    })
                }
                if(this.dialogTitle.indexOf('修改')!=-1){
                    this.postRequest("/mall/saleman/update",{
                        mallSaleManId:this.add.mallSaleManId,
                        mallSaleManName:this.add.mallSaleManName,
                        mallSaleManPhone:this.add.mallSaleManPhone,
                    }).then(resp=>{
                        this.dialogLoading=false;
                        if(resp && resp.data.status == 200){
                            this.dialogShow=false;
                            this.giftInfoInit();
                            this.common.showToast('success','修改成功')
                            this.requestInfo()
                        }
                    })
                }   
            } 
        },
        edit(item){
            console.log(item)
            this.dialogShow=true;
            this.dialogTitle='修改销售人员信息';
            this.add.mallSaleManId=item.mallSaleManId;
            this.add.mallSaleManName=item.mallSaleManName;
            this.add.mallSaleManPhone=item.mallSaleManPhone;
        },
        deleteItem(item){
            this.$confirm("此操作将删除该人员信息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
            .then(() => {
            this.tableLoading=true;
            this.deleteRequest("/mall/saleman/remove?mallSaleManId="+item.mallSaleManId).then(resp => {
                this.tableLoading=false;
                if (resp && resp.data.status == 200) {
                    this.common.showToast("success", resp.data.msg);
                    this.initData();
                }
            });
            })
            .catch(() => {});
        },
        giftInfoInit(){
            this.add={
                mallSaleManId:"",
                mallSaleManName:"",
                mallSaleManPhone:"",
            }
        },
        exports(){
            this.exportLoading=true;
            console.log(searchInfo)
            var address=`/mall/saleman/export?mallSaleManName=${searchInfo.mallSaleManName}&&mallSaleManPhone=${searchInfo.mallSaleManPhone}`
            this.common.downloadFile(address);
            setTimeout(() => {
                this.exportLoading=false;
            }, 3000); 
        }
    }
}
</script>
<style scoped>
.el-row {
  margin-bottom: 30px;
  height: 50px;
  line-height: 50px;
}
.el-col {
  height: 50px;
  line-height: 50px;
}
.el-input{
    width: 70%;
}
.ql-snow.ql-toolbar{
    position: absolute !important;
    background-color: #fff !important;
    z-index: 2 !important;
    top: 0;
}
.ql-editor{
    height: 300px;
    overflow-y: scroll;
}
.ivu-upload {
    display: none;
}
</style>
